<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <!-- 页面标题和描述 -->
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-info">
                    <h4><i class="fa fa-cogs"></i> {$title}</h4>
                    <p>{$description}</p>
                    <p><strong>性能监控：</strong> {$performance_data}</p>
                    <p><strong>当前视图：</strong> {$view_name}</p>
                </div>
            </div>
        </div>

        <!-- 实时性能监控 -->
        <div class="row" style="margin-bottom: 20px;">
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fa fa-tachometer"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">CPU使用率</span>
                        <span class="info-box-number">68.5%</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 68.5%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-memory"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">内存使用</span>
                        <span class="info-box-number">42.3%</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 42.3%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-orange"><i class="fa fa-network-wired"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">网络负载</span>
                        <span class="info-box-number">23.7%</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 23.7%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 性能趋势图表 -->
        <div class="row">
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">CPU使用趋势</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="chart">
                            <canvas id="cpuChart" style="height: 250px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">内存使用趋势</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="chart">
                            <canvas id="memoryChart" style="height: 250px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设备状态监控 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <h3 class="box-title">设备实时状态</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>设备名称</th>
                                        <th>IP地址</th>
                                        <th>状态</th>
                                        <th>CPU使用率</th>
                                        <th>内存使用率</th>
                                        <th>网络状态</th>
                                        <th>最后心跳</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>PLC-001</td>
                                        <td>192.168.1.101</td>
                                        <td><span class="label label-success">在线</span></td>
                                        <td>65.2%</td>
                                        <td>38.7%</td>
                                        <td><span class="label label-success">正常</span></td>
                                        <td>2秒前</td>
                                    </tr>
                                    <tr>
                                        <td>PLC-002</td>
                                        <td>192.168.1.102</td>
                                        <td><span class="label label-success">在线</span></td>
                                        <td>71.8%</td>
                                        <td>45.2%</td>
                                        <td><span class="label label-warning">警告</span></td>
                                        <td>5秒前</td>
                                    </tr>
                                    <tr>
                                        <td>PLC-003</td>
                                        <td>192.168.1.103</td>
                                        <td><span class="label label-danger">离线</span></td>
                                        <td>--</td>
                                        <td>--</td>
                                        <td><span class="label label-danger">断开</span></td>
                                        <td>3分钟前</td>
                                    </tr>
                                    <tr>
                                        <td>PLC-004</td>
                                        <td>192.168.1.104</td>
                                        <td><span class="label label-success">在线</span></td>
                                        <td>59.3%</td>
                                        <td>41.8%</td>
                                        <td><span class="label label-success">正常</span></td>
                                        <td>1秒前</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 视图切换按钮 -->
        <div class="row">
            <div class="col-sm-12">
                <div class="box box-default">
                    <div class="box-body">
                        <div class="btn-group">
                            <a href="/plc?ref=addtabs" class="btn btn-primary">
                                <i class="fa fa-home"></i> 返回默认视图
                            </a>
                            <a href="/plc?view=aaa&ref=addtabs" class="btn btn-info">
                                <i class="fa fa-line-chart"></i> 切换到AAA视图
                            </a>
                            <button type="button" class="btn btn-warning btn-refresh-performance">
                                <i class="fa fa-refresh"></i> 刷新性能数据
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function() {
    // 刷新性能数据按钮事件
    $('.btn-refresh-performance').on('click', function() {
        Toastr.info('正在刷新性能监控数据...');
        setTimeout(function() {
            Toastr.success('性能监控数据刷新完成');
        }, 1000);
    });

    // 模拟图表数据
    console.log('当前加载的视图：BBB性能监控视图');
    console.log('性能数据：', {
        cpu_usage: 68.5,
        memory_usage: 42.3,
        network_load: 23.7
    });
});
</script>